<script setup lang="ts">
import { getMonitorListApi } from '@/apis/modules/monitor.ts'
import { commonTableProps } from '@/utils/table.ts'
import useConfig from './useConfig.ts'

const queryParams = ref({
  region_id: '',
  sort: 'cpu_usage_rate',
  order: 'desc',
  start_time: '',
  end_time: '',
})

const {
  data: tableData,
  pagination,
  loading,
  run,
} = useListRequest(getMonitorListApi, {
  params: queryParams,
  immediate: true,
})

const { allRegionOptions, searchSchema, tableColumns } = useConfig()
const { createSortChange } = useTable(run, tableData)
const onSortChange = createSortChange(queryParams)

const dateRange = ref<string[]>([])
watch(dateRange, () => {
  const [start, end] = dateRange.value || []
  queryParams.value.start_time = start || ''
  queryParams.value.end_time = end || ''
  run()
})
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <div class="flex space-x-3">
        <a-range-picker
          v-model="dateRange"
          show-time
          value-format="X"
          format="YYYY-MM-DD HH"
          :time-picker-props="{
            defaultValue: ['00:00:00', '00:00:00'],
          }"
          :placeholder="['选择开始时间', '选择结束时间']"
          class="w-100!"
        >
          <template #suffix-icon>
            <i-icons-calendar class="mt-1" />
          </template>
        </a-range-picker>
        <a-select
          v-model="queryParams.region_id"
          class="!w-[160px]"
          :options="[{ label: '全部区域', value: '' }, ...allRegionOptions]"
          @change="run()"
        />
        <multiple-condition-search
          v-model="queryParams"
          :schema="searchSchema"
          @search="run"
        />
      </div>
    </template>
    <a-table
      v-bind="commonTableProps"
      :data="tableData"
      :columns="tableColumns"
      @sorter-change="onSortChange"
    />
  </main-container>
</template>
